<template>
	<view class="mainbgc ">
		<view class="ffffff radius mainpadding_top">
			<view class="strongtext">规格类型</view>
			<view class="flexleft margin_top">
				<view :class="lable==1?'focusbgc itemlable margin_right':'nofocusbgc itemlable margin_right'"
					@click="changelable(1)">单规格</view>
				<view :class="lable==2?'focusbgc itemlable':'nofocusbgc itemlable'" @click="changelable(2)">多规格</view>
			</view>
		</view>
		<!-- 单规格 -->
		<view class="" v-show="lable==1">
			<view class="mainpadding">
				<view class="mainpadding_top ffffff radius flexbetween">
					<view class="strongtext minwidth">规格尺寸</view>
					<view class="flexright">
						<input type="text" placeholder="请输入规格尺寸" class="textright margin_right" v-model="difference">
					</view>
				</view>
				<view class="mainpadding_top ffffff radius flexbetween">
					<view class="strongtext minwidth">商品原价</view>
					<view class="flexright">
						<input type="text" placeholder="请输入商品原价" class="textright margin_right" v-model="market_price">
					</view>
				</view>
				<view class="mainpadding_top ffffff radius flexbetween">
					<view class="strongtext minwidth">商品现价</view>
					<view class="flexright">
						<input type="text" placeholder="请输入商品现价" class="textright margin_right" v-model="price">
					</view>
				</view>
				<view class="mainpadding_top ffffff radius flexbetween">
					<view class="strongtext minwidth">库存</view>
					<view class="flexright">
						<input type="text" placeholder="请输入库存" class="textright margin_right" v-model="stock">
					</view>
				</view>

			</view>
			<view class="footer_di">
				<view class="bottombtn margin_top" @click="submitsingle">保存</view>
			</view>
		</view>
		<!-- 多规格 -->
		<view class="" v-show="lable==2">
			<view class="section mainpadding">
				<view class="ffffff line">
					<view class="text_weight">新增规格属性</view>
					<view class="flexleft margin_top">
						<input type="text" placeholder="请输入规格属性" class="name" v-model="guigename">
						<view class="add" @click="addguige">添加</view>
					</view>
				</view>
				<!-- 颜色 -->
				<view class="" v-for="(item,index) in spu" :key="index">
					<view class="flexbetween  padding_top">
						<view class="text_weight color">{{item.name}}</view>
						<view class="del" @click="delspu(index)"></view>
					</view>
					<view class="flexleft margin_top">
						<input type="text" placeholder="请输入规格值" class="name" v-model="item.value">
						<view class="add" @click="addlable(index)">添加</view>
					</view>
					<view class="flexleft  flex_wrap">
						<view class="blue_color dd   margin_top" v-for="(ite,inde) in spuItem[index]" :key="inde">
							<view class="">{{ite.value}}</view>
							<view class="delete" @click="delspuItem(index,inde)">x</view>
						</view>
					</view>
				</view>
				<!--颜色：黑色 尺寸-->
				<view class="mainpadding fa margin_top" v-if="zdylist.length">
					<view class=" margin_top" v-for="(item,index) in zdylist" :key="index">
						<view class="yanse" style="display: inline-block;margin-right: 30rpx;" v-for="v in item.guiges"
							:key="v">{{v.name}}:{{v.value}}</view>
						<view class="flexleft">
							<view class="input flexleft margin_right2">
								<view class="word_grey yj">原价：</view>
								<input type="text" placeholder="请输入" class="yanse" v-model="item.yuanjia">
							</view>
							<view class="input flexleft">
								<view class="word_grey yj">现价：</view>
								<input type="text" placeholder="请输入" class="yanse word_grey" v-model="item.xianjia">
							</view>
						</view>
						<view class="input flexleft">
							<view class="word_grey">库存数：</view>
							<input type="text" placeholder="请输入" class="yanse" v-model="item.kucun">
						</view>
					</view>
				</view>
				<view class="bigbtn" @click="sbumitmulti">保存</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				show: false,
				lable: 2, //1单规格，2多规格
				// 多规格开始
				guigename: "", //规格名称
				spu: [],
				spuItem: [],
				sku: [],
				zdylist: [], //自定义数组
				// 多规格结束
				// 单规格
				market_price: "",
				stock: "",
				price: "",
				difference:"",

			}
		},
		onLoad(options) {
			let data = JSON.parse(decodeURIComponent(options.msg));
			 
			this.lable = data.lable
			this.spu = data.yspu
			this.spuItem = data.yspuItem
			this.sku = data.ysku
			this.zdylist = data.yzdylist
			this.market_price = data.market_price
			this.stock = data.stock
			this.price = data.price
			this.difference=data.difference
		},
		methods: {
			// 多规格提交
			sbumitmulti(){
				if(this.spu.length==0){
					httpRequest.toast("请输入规格属性")
					return false
				}
				let spuarr = []
				this.spu.forEach(item=>{
					spuarr.push(item.name)
				})
				let spu = spuarr.join()
				let sku = []
				let price = []
				let market_price = []
				let stocks = []
				let flag = false
				if(this.zdylist.length==0){
					httpRequest.toast("请输入规格值")
					return false
				}
				this.zdylist.forEach(item=>{
					let arr = []
					item.guiges.forEach(ite=>{
						arr.push(ite.value)
					})
					
					price.push(item.xianjia)//现价
					market_price.push(item.yuanjia)//原价
					stocks.push(item.kucun)//库存
					if(item.xianjia=="" || item.yuanjia=="" || item.kucun==""){
						flag = true
					}
					sku.push(arr.join())
				})
				 
				if(flag){
					httpRequest.toast("请将信息填写完整")
					return false
				}
				let spuItem = []
				this.spu.forEach((item,index)=>{
					let arr = []
					if(Array.isArray(this.spuItem[index])){
						this.spuItem[index].forEach(ite=>{
							arr.push(ite.value)
						})
					}
					spuItem.push(arr.join())
				})
				let data = {
					spu,
					sku,
					price,
					market_price,
					stocks,
					spuItem,
					yspu:this.spu,//原内容需要发送过去编辑的时候使用
					yspuItem: this.spuItem,
					ysku: this.sku,
					yzdylist: this.zdylist, //自定义数组
				}
				uni.$emit("spggmulti",data)
				uni.navigateBack(1)
				
			},
			// 多规格开始
			// 添加规格
			addguige() {
				if (!this.guigename) {
					httpRequest.toast('请填写属性');
					return false;
				}
				this.spu.push({
					name: this.guigename,
					value: ''
				});
				this.guigename = '';
			},
			// 删除规格
			delspu(index){
				this.spu.splice(index,1)
				if (this.spuItem[index]) {
					this.spuItem.splice(index,1)
				}
				this.skuCreate();
			},
			// 规格单位删除
			delspuItem(index,inde){
				if(this.spuItem[index].length==1){
					this.spuItem.splice(index,1)
					this.spu.splice(index,1)
				}else{
					this.spuItem[index].splice(inde,1)
				}
				this.skuCreate();
			},
			// 规格单位添加
			addlable(index) {
				let spu = this.spu;
				if (!spu[index]['value']) {
					httpRequest.toast('请填写规格值');
					return false;
				}
			 

				if (this.spuItem[index]) {
					this.spuItem[index].push({
						name: spu[index]['name'],
						value: spu[index]['value']
					})
				} else {
					this.spuItem.push([{
						name: spu[index]['name'],
						value: spu[index]['value']
					}])
				}
				 
				spu[index]['value'] = ""
				this.spu = spu;
				this.skuCreate();
			},
			// 生成Sku
			skuCreate() {
				this.sku = this.skuDesign(this.spuItem)
				 
				let arr = []
				this.sku.forEach((item, index) => {
					arr.push({
						guiges: item,
						yuanjia: "",
						xianjia: "",
						kucun: "",
					})
				})
				 
				this.zdylist = arr
			},

			skuDesign(array) {
				if (array.length == 0) return []
				if (array.length < 2) {
					var res = []
					array[0].forEach(function(v) {
						res.push([{
							name: v.name,
							value: v.value,
						}])
					})
					return res
				}
				return [].reduce.call(array, function(col, set) {
					 
					var res = [];
					col.forEach(function(c) {
						set.forEach(function(s) {
							var t = [].concat(Array.isArray(c) ? c : [c]);
							t.push(s);
							res.push(t);
						})
					});
					 
					return res;
				});
			},
			// 多规格结束
			// 单规格
			submitsingle(){
				if(this.market_price==""){
					httpRequest.toast("请输入商品原价")
					return false
				}
				if(this.price==""){
					httpRequest.toast("请输入商品现价")
					return false
				}
				if(this.stock==""){
					httpRequest.toast("请输入商品库存")
					return false
				}
				if(this.difference==""){
					httpRequest.toast("请输入规格名称")
					return false
				}
				let data = {
					market_price:this.market_price,
					price:this.price,
					stock:this.stock,
					difference:this.difference
				}
				uni.$emit("spggsingle",data)
				uni.navigateBack(1)
			},

			affirm() {
				this.show = false
			},
			close() {
				this.show = false
			},

			changelable(value) {
				this.lable = value
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bigbtn {
		margin-top: 200rpx;
	}

	.footer_di {
		width: 100%;
		padding: 30rpx 30rpx 30rpx 30rpx;
		position: fixed;
		bottom: 0rpx;
		box-sizing: border-box;
	}

	.quan {
		width: 20%;

	}

	.fa {
		background-color: #fafafa;
	}

	.delete {
		color: #fff;
		font-size: 16rpx;
		position: absolute;
		top: 0rpx;
		right: 0rpx;
		background-color: #228DFF;
		padding: 0rpx 15rpx;
		display: inline-block;
		border-top-right-radius: 8rpx;
		border-bottom-left-radius: 8rpx;
		text-align: center;

	}

	.dd {
		position: relative;
		// bottom: 0rpx;
		// left: 0rpx;
		// min-width: 10%;
		margin-right: 20rpx;
	}

	.blue_color {
		padding: 16rpx 30rpx;
		background-color: RGBA(233, 244, 255, 1);
		color: rgba(34, 141, 255, 1);
		border-radius: 8px;
		text-align: center;
	}

	.name {
		width: 80%;
		border: 2rpx solid #228dff;
		padding: 25rpx 30rpx;
		border-top-left-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
	}

	.add {
		width: 20%;
		color: #fff;
		background-color: #228DFF;
		padding: 29rpx 20rpx 32rpx 28rpx;
		border-top-right-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
		text-align: center;
		font-size: 28rpx;
	}

	.line {
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid RGBA(247, 247, 247, 1);
	}

	.color {
		color: rgba(34, 141, 255, 1);
		font-weight: 800;
		font-size: 28rpx;
	}

	.yanse {
		color: rgba(34, 141, 255, 1);
	}

	/*  */
	.shanchu {
		margin-top: 30rpx;
	}

	.input {
		padding: 30rpx 30rpx;
		background-color: #fff;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		margin-top: 30rpx;
	}

	.yuanjia {
		width: 39%;
	}

	.yj {
		width: 190rpx;
	}

	.xian {
		border-bottom: 1rpx solid #ccc;
	}

	.blue {
		color: #228DFF;
	}

	.section_ming {
		padding: 30rpx 0rpx;
	}

	.section_header {
		padding: 30rpx 30rpx;
		background-color: #f7f7f7;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
	}

	.section {
		background-color: #fff;
		margin-top: 30rpx;
		padding: 30rpx 30rpx;
	}

	.jia {
		width: 28rpx;
		height: 28rpx;
		background-color: rgba(34, 141, 255, 1);
		border-radius: 50%;
		text-align: center;
		color: #ffff;
		line-height: 28rpx;
	}

	.form {
		text-align: center;
		padding-top: 54rpx;
		padding-bottom: 61rpx;
	}

	.pu {
		background: RGBA(247, 249, 250, 1);
		border-radius: 41rpx 41rpx 41rpx 41rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		padding: 20rpx 71rpx 21rpx 71rpx;
		margin: 0rpx 25rpx 30rpx 25rpx;
	}

	.footer {
		padding: 84rpx 30rpx;
	}

	.nav {
		padding: 30rpx 10rpx;
	}

	.upbox {
		width: 180rpx;
		height: 180rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
		background-color: RGBA(233, 244, 255, 1);
	}

	.lan {
		background: RGBA(233, 244, 255, 1);
		border-radius: 41rpx 41rpx 41rpx 41rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #228DFF;
		padding: 20rpx 71rpx 21rpx 71rpx;
		margin: 0rpx 25rpx 30rpx 25rpx;
	}

	.itemlable {
		padding: 15rpx 35rpx;
		border-radius: 10rpx;
	}

	.mainbgc {
		overflow: hidden;
	}

	.focusbgc {
		background-color: rgba(34, 141, 255, .1);
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #228DFF;
	}

	.nofocusbgc {
		background-color: #EFEFEF;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.item_image_box {
		width: 33.33%;
	}

	.item_image {
		position: relative;
		width: 180rpx;
		height: 180rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>